<template>
  <div>
    <div class="user-block">
      <div class="user-row">
        <div class="user-cell">
          <image class="user-img"></image>
          <div class="user-info">
            <div>你好，张三三</div>
            <div>安徽交控信息产业有限公司</div>
          </div>
        </div>
      </div>
    </div>
    <div class="first-row-block">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-tabs
            class="tab-content"
            v-model="activeName"
            @tab-click="handleClick"
          >
            <el-tab-pane
              v-for="item in statusList"
              :name="item.value"
              :label="item.label + '(' + item.count + ')'"
              :key="item.value"
            >
              <todo-modal style="width:100%" />
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="8"
          ><el-calendar class="canlendar-block"> </el-calendar
        ></el-col>
      </el-row>
    </div>
    <div class="first-row-block">
      <el-row :gutter="20">
        <el-col :span="16">
          <div class="second-left">
            <div class="second-title">"三重一大"决策和运营监管</div>
            <el-row :gutter="10">
              <el-col :span="14">
                <el-table
                  :data="secondRowData"
                  stripe
                >
                  <el-table-column
                    align="center"
                    label="安徽省交控信息产业有限公司决策和运行监管统计表"
                  >
                    <el-table-column
                      align="center"
                      prop="label"
                      label="名称"
                      min-width="180"
                    >
                    </el-table-column>
                    <el-table-column
                      align="center"
                      prop="value"
                      label="数量"
                      min-width="180"
                    >
                    </el-table-column>
                  </el-table-column>
                </el-table>
              </el-col>
              <el-col :span="10"><pie-charts style="width:100%" /> </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8"
          ><el-calendar class="canlendar-block"> </el-calendar
        ></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import TodoModal from "./components/todoModal";
import PieCharts from "./components/PieCharts";
// import PanelGroup from "./dashboard/PanelGroup";
// import LineChart from "./dashboard/LineChart";
// import RaddarChart from "./dashboard/RaddarChart";
// import PieChart from "./dashboard/PieChart";
// import BarChart from "./dashboard/BarChart";
// import { getNumber } from "@/api/common";

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
};

export default {
  name: "Index",
  components: { TodoModal, PieCharts },
  created() {},
  data() {
    return {
      activeName: "UnDealAffairs",
      statusList: [
        {
          label: "事项清单待办",
          value: "UnDealAffairs",
          count: 4
        },
        {
          label: "会议信息待办",
          value: "unDealMeet",
          count: 5
        },
        {
          label: "制度信息待办",
          value: "unDealSystem",
          count: 2
        }
      ],
      secondRowData: [
        { label: "三重一大决策监管上报数", value: "123" },
        { label: "重大问题决策上报数", value: "58" },
        { label: "重要干部任免上报数", value: "17" },
        { label: "重大项目投资决策上报数", value: "16" },
        { label: "大额资金使用上报数", value: "41" }
      ]
    };
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.user-block {
  background: #f0f1f2;
  overflow: hidden;
}

.user-row {
  width: 98%;
  height: 70px;
  margin: 8px 0 10px 10px;
  background: #fff;
  border-left: 5px solid #2d5cb0;
  border-radius: 6px;
}
.user-cell {
  background: #fff;
}
.user-img {
  display: inline-block;
  margin-left: 20px;
}
.user-info {
  display: inline-block;
  padding-top: 6px;
  line-height: 30px;
  margin-left: 16px;
}

.first-row-block {
  background: #f0f1f2;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  padding: 0 16px 20px 10px;
}
.tab-content {
  padding: 5px 0 0 5px;
  background: #fff;
  line-height: 50px;
}
.second-left {
  background: #fff;
  padding: 10px 16px 20px 10px;
}
.second-title {
  padding: 10px 0 16px 2px;
}
</style>
<style>
.el-calendar-table .el-calendar-day {
  box-sizing: border-box;
  padding: 8px;
  height: 48px;
}
.el-calendar__body {
  padding: 12px 20px 18px;
}
</style>
